<template>
  <div>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>储值规则</span>
      </div>
    </div>
    <el-button type="primary" size="medium" @click="handleadd">新增储值规则</el-button>
    <div class="tabledata mar_t20">
      <el-table
              v-loading="listLoading"
              :element-loading-text="elementLoadingText"
              :data="list"
              stripe
              style="width: 100%"
              @selection-change="setSelectRows">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="sort"
                label="排序"
        >
        </el-table-column>
        <el-table-column
                prop="name"
                label="储值规则名称"
        >
        </el-table-column>
        <el-table-column
                prop="money"
                label="储值金额"
        >
        </el-table-column>
        <el-table-column
                prop="zs"
                label="赠送"
        >
          <template slot-scope="scope">
            <div v-show="scope.row.moneyOpen=='1'">{{scope.row.giveMoney}}元</div>
            <div v-show="scope.row.integralOpen=='1'">{{scope.row.integral}}积分</div>
            <div v-show="scope.row.growOpen=='1'">{{scope.row.giveGrow}}成长值</div>
          </template>
        </el-table-column>
        <el-table-column
                prop="number"
                label="储值次数"
        >
        </el-table-column>
        <el-table-column
                prop="display"
                label="状态"
        >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                       @change="changeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
                prop="kc"
                label="操作"
        >
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text"  @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  </div>
</template>
<script>
  import {getDepositList,modifyDeposit,} from "@/api/user";
  export default {
    created() {
      this.fetchData();
    },
    data () {
      return {
        list: [],
        listLoading: true,
        selectRows: "",
        elementLoadingText: "正在加载...",
        page: {
          total: 0,
          size: 10,
          currentPage: 1,
        },
      }
    },
    methods: {
      async fetchData() {
        const {data, count} = await getDepositList({page:this.page.currentPage});
        this.listLoading=false;
        this.list = data;
        this.page.total = count;
      },
      setSelectRows(val) {
        this.selectRows = val;
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.fetchData();
      },
      async changeSwitch(row) {
        const {msg} = await modifyDeposit({id: row.id, display: row.display,type:1});
        this.$baseMessage(msg, "success");
        this.fetchData();
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm("你确定要删除当前项吗", null, async () => {
            const {msg} = await modifyDeposit({id: row.id,type:2});
            this.$baseMessage(msg, "success");
            this.fetchData();
          });
        } else {
          if (this.selectRows.length > 0) {
            const id = this.selectRows.map((item) => item.id);
            this.$baseConfirm("你确定要删除选中项吗", null, async () => {
              const {msg} = await modifyDeposit({id,type:2});
              this.$baseMessage(msg, "success");
              this.fetchData();
            });
          } else {
            this.$baseMessage("未选中任何行", "error");
            return false;
          }
        }
      },
      handleadd(){
        this.$router.push({path: 'valueruleadd'})
      },
      handleEdit(row) {
        this.$router.push(`/valueruleadd?id=${row.id}`);
      },
      // handleEdit(row) {
      //   if (row.id) {
      //     this.$refs["edit"].showEdit(row);
      //   } else {
      //     this.$refs["edit"].showEdit();
      //   }
      // },
    }
  }
</script>
